<template>
  <div>
    <div class="header">
      <el-menu
        router
        :default-active="this.$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/weight">体重明细</el-menu-item>
        <el-menu-item index="/zichan">资产明细</el-menu-item>
        <el-menu-item index="/touzi">投资明细</el-menu-item>
        <el-menu-item index="/liushui">花销明细</el-menu-item>
      </el-menu>

      <div class="user">
        你好：{{ username }}&emsp;
        <el-button type="info" size="mini" @click="logout" round
          >注销</el-button
        >
      </div>
    </div>
    <div class="admin">
      
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      username: "",
    };
  },
  created() {
    this.active = this.$route.query.active;
  },
  methods: {
      
    // 判断用户是否登录
    getuser() {
      if (
        localStorage.getItem("username") == "" ||
        localStorage.getItem("username") == null
      ) {
        this.$router.push({ path: "/" });
      } else {
        this.username = localStorage.getItem("username");
      }
    },
    // 退出登录
    logout() {
      localStorage.removeItem("username");
      this.$router.push({ path: "/" });
    },
  },
  mounted() {
    this.getuser();
  },
};
</script>

<style >
.header {
  position: absolute;
  line-height: 50px;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  font-style: italic;
}

.user {
  position: absolute;
  line-height: 50px;
  top: 0px;
  right: 5%;
  height: 50px;
}
.admin {
 width: 100%;
  height: 100%;

  background-image: url("../../assets/3.jpg");
  background-size: 100% 100%;
  position: fixed;
  top:58px;
  left:0px;
  opacity: 0.9;
  
}
</style>
